<template>
  <div class="home">
    <div class="content" v-if="userUid == 'admin'">
      <div v-for="item in homeArr" :class="`item ${item.className}`" @click="onCardClidk(item.id)" :key="item.id">
        <div class="top">
          <div class="img"></div>
        </div>
        <div class="bottom">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "@/components/HelloWorld.vue";
import { getToken } from '@/utils/auth'
import { updateToken } from '@/http/api/myHttp.js'

export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      homeArr: [
        // {
        //   id: 8,
        //   name: '可视化指挥系统',
        //   className: 'item8'
        // },
        // {
        //   id: 5,
        //   name: '报表中心',
        //   className: 'itemFive'
        // },
        // {
        //   id: 6,
        //   name: '视频中心',
        //   className: 'itemSix'
        // },
        // {
        //   id: 7,
        //   name: '预警中心',
        //   className: 'itemSeven'
        // },
        // {
        //   id: 0,
        //   name: '组织机构',
        //   className: 'itemZer'
        // },
        {
          id: 1,
          name: '用户中心',
          className: 'itemOne'
        },
        {
          id: 2,
          name: '角色管理',
          className: 'itemTwo'
        },
        {
          id: 3,
          name: '日志中心',
          className: 'itemThree'
        },
        {
          id: 4,
          name: '菜单管理',
          className: 'itemFour'
        }
      ],
      userUid:""
    }
  },
  created() {},
  mounted() {
      this.userUid = this.$store.getters['user/getUserInfo'].userUid
  },
  methods: {
    onCardClidk(index) {
      switch (index) {
        case 0:
          this.$router.push('/systemManagement/zzjg')
          break
        case 1:
          this.$router.push('/sysManagement/yhgl')
          break
        case 2:
          this.$router.push('/sysManagement/jsgl')
          break
        case 3:
          this.$router.push('/sysManagement/sysLog')
          break
        case 4:
          this.$router.push('/sysManagement/cdgl')
          break
        case 5:
          this.$router.push('/systemManagement/bbgl')
          break
        case 6:
          this.$router.push('/systemManagement/spzx')
          break
        case 7:
          this.$router.push('/systemManagement/yjzx')
          break
        case 8:
          const list = this.$store.getters['permission/GET_Routes']
          var url = ''
          list.forEach((item) => {
            if (item.meta && item.meta.title == '系统管理') {
              if (item.children && item.children.length) {
                item.children.forEach((item2) => {
                  if (item2.meta && item2.meta.title == '可视化指挥系统') {
                    url = item2.meta.link
                  }
                })
              }
            }
          })
          updateToken().then((res) => {
            if (res.code === 0) {
              const token = getToken()
              if (url.indexOf('?') > -1) {
                url = url + '&token=' + token
              } else {
                url = url + '?token=' + token
              }
              window.open(url)
            }
          })
          // window.open(
          //   'https://10.236.248.71/preview/index.html?_t=1722574625617414#/screen/share/e0e30df5f9efdff336bb0b40d9a44012?loading=true&userId=17424db41e3621d4efdcd6256645692d'
          // )
          break
        default:
          break
      }
    }
  },
  beforeDestroy() {}
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .content {
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    grid-gap: 30px;
   // display: flex;
   // justify-content: space-around;
   // flex-wrap: wrap;
   // align-items: center;
    .item {
      box-sizing: border-box;
      width: 100%;
      height: 260px;
      // margin-left: 40px;
      // margin-right: 40px;
      margin-bottom: 20px;
      border-radius: 10px;
      cursor: pointer;
      .top {
        height: 196px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .img {
          width: 120px;
          height: 120px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .bottom {
        width: 100%;
        height: 64px;
        line-height: 64px;
        background-color: rgba(255, 255, 255, 0.5);
        font-size: 22px;
        font-weight: 500;
      }
    }
    .itemZer {
      background: linear-gradient(180deg, rgba(212, 252, 121, 1) 0%, rgba(150, 230, 161, 1) 100%);
      .img {
        background: url('@/assets/icon/home1.png');
      }
      .bottom {
        color: rgba(57, 133, 66, 1);
      }
    }
    .itemOne {
      background: linear-gradient(180deg, rgba(147, 165, 207, 1) 0%, rgba(228, 239, 233, 1) 100%);
      .img {
        background: url('@/assets/icon/user.png');
      }
      .bottom {
        color: rgba(80, 117, 166, 1);
      }
    }

    .itemTwo {
      background: linear-gradient(180deg, rgba(80, 201, 195, 1) 0%, rgba(150, 222, 218, 1) 100%);
      .img {
        background: url('@/assets/icon/role.png');
      }
      .bottom {
        color: rgba(72, 117, 120, 1);
      }
    }

    .itemThree {
      background: linear-gradient(0, rgba(224, 195, 252, 1) 0%, rgba(142, 197, 252, 1) 100%);
      .img {
        background: url('@/assets/icon/log.png');
      }

      .bottom {
        color: rgba(93, 101, 166, 1);
      }
    }

    .itemFour {
      background: linear-gradient(180deg, rgba(134, 196, 165, 1) 0%, rgba(207, 245, 125, 1) 100%);
      .img {
        background: url('@/assets/icon/permissions.png');
      }
      .bottom {
        color: rgba(47, 107, 78, 1);
      }
    }

    .itemFive {
      background: linear-gradient(0, rgba(237, 135, 135, 1) 0%, rgba(227, 100, 93, 1) 100%);
      .img {
        background: url('@/assets/icon/report.png');
      }
      .bottom {
        color: rgba(135, 70, 66, 1);
      }
    }

    .itemSix {
      background: linear-gradient(180deg, rgba(255, 193, 87, 1) 0%, rgba(252, 233, 146, 1) 100%);
      .img {
        background: url('@/assets/icon/video.png');
      }

      .bottom {
        color: rgba(150, 119, 62, 1);
      }
    }
    .itemSeven {
      background: linear-gradient(180deg, rgba(247, 112, 98, 1) 0%, rgba(254, 81, 150, 1) 100%);
      .img {
        background: url('@/assets/icon/home2.png');
      }
      .bottom {
        color: rgba(153, 40, 55, 1);
      }
    }
    .item8 {
      background: linear-gradient(180deg, rgb(37, 101, 238) 0%, rgb(81, 191, 254) 100%);
      .img {
        background: url('@/assets/icon/home3.png');
      }
      .bottom {
        color: rgb(41, 82, 218);
      }
    }
  }
}
</style>
